{% extends "base.html" %}

{% block content %}

<div id="content-page" class="content-page">
    <div class="container">
        <div class="row">
            <div class="card text-center" style="text-align: center;  margin: 0 auto;">
                <div class="card-header">
                    {{playlist['name']}}
                </div>
                <div class="card-body">
                    <img src="{{playlist['images'][0]['url']}}" style="max-width: 300px;"
                         alt="{{playlist['name']}} cover">
                </div>
                <div class="card-footer text-muted">
                    {{playlist['tracks']['items']|length}} Tracks, {{duration|string|replace(".", ":")}} Mins. total.
                </div>
            </div>
            <div style="width: 100%">
                <table class="table table-responsive-xl" style="text-align: center; ">
                    <thead class="table-light">

                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Title</th>
                        <th scope="col">Artist</th>
                        <th scope="col">Length</th>
                    </tr>
                    </thead>

                    <tbody>
                    {% for track in playlist['tracks']['items'] %}
                        <tr id="track-line{{loop.index}}" onmouseover="MouseOverTrack('{{loop.index}}')" onmouseout="MouseOutTrack('{{loop.index}}')">
                            <td id="track-index{{loop.index}}" onclick="StartPlayback(`{{spotify.auth_manager.get_access_token()['access_token']}}`, `{{track['uri']}}`)">{{loop.index}}</td>
                            <td>{{track['name']}}</td>
                            <td>
                                {% for artist in track['artists'] %}
                                <a href="/music/artist/{{artist['id']}}">{{artist['name']}}</a>
                                {% if not loop.last %}, {% endif %}
                                {% endfor %}
                            </td>
                            <td>{{ ((track['duration_ms']|int / 1000 / 60)|round(2))|string|replace(".", ":") }}
                                min.
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>


        </div>
    </div>
</div>
{% endblock %}